
<html lang=""><head>
    <title>绘图 · MINA</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta name="description" content="">
    <meta name="generator" content="GitBook 3.2.0">




    <link rel="stylesheet" href="../../gitbook/style.css">




    <link rel="stylesheet" href="../../gitbook/gitbook-plugin-highlight/website.css">



    <link rel="stylesheet" href="../../gitbook/gitbook-plugin-search/search.css">























    <meta name="HandheldFriendly" content="true">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../../gitbook/images/favicon.ico" type="image/x-icon">


    <link rel="next" href="ui-other.html">


    <link rel="prev" href="api-animation.html">


</head>
<body>

<div class="book with-summary">
    <div>

        <div class="sub_nav_box">
            <div class="sub_nav_inner">




                <ul class="top_sub_nav">




                    <li class="sub_nav_item " data-level="1.1" data-path="../">

                        <a href="../">


                            简易教程

                        </a>

                    </li>

                    <li class="sub_nav_item " data-level="1.2" data-path="../framework/MINA.html">

                        <a href="../framework/MINA.html">


                            框架

                        </a>

                    </li>

                    <li class="sub_nav_item " data-level="1.3" data-path="../component/">

                        <a href="../component/">


                            组件

                        </a>

                    </li>

                    <li class="sub_nav_item selected" data-level="1.4" data-path="./">

                        <a href="./">


                            API

                        </a>

                    </li>

                    <li class="sub_nav_item " data-level="1.5" data-path="../devtools/devtools.html">

                        <a href="../devtools/devtools.html">


                            工具

                        </a>

                    </li>

                    <li class="sub_nav_item " data-level="1.6" data-path="../qa/qa.html">

                        <a href="../qa/qa.html">


                            Q&amp;A

                        </a>

                    </li>




                </ul>




                <!-- <h1>绘图</h1> -->
                <div id="book-search-input" role="search">
                    <form>
                        <label for="search-input" class="search-icon" id="js-search-icon"></label>
                        <input type="text" id="search-input" name="search-input" placeholder="搜索">
                        <button type="reset" class="clear-input-btn"></button>
                    </form>
                </div>
            </div>
        </div>

        <div class="book-summary">


            <nav role="navigation">





                <ul class="summary">


                    <li class="chapter  open" data-level="1.4.1" data-path="api-network.html">

                        <a href="api-network.html">


                            网络

                        </a>



                        <ul class="articles">


                            <li class="chapter  " data-level="1.4.1.1" data-path="network-request.html">

                                <a href="network-request.html">


                                    发起请求

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.4.1.2" data-path="network-file.html">

                                <a href="network-file.html">


                                    上传、下载

                                </a>



                                <ul class="articles">


                                    <li class="chapter  " data-level="1.4.1.2.1" data-path="network-file.html">

                                        <a href="network-file.html#wxuploadfileobject">


                                            wx.uploadFile

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.1.2.2" data-path="network-file.html">

                                        <a href="network-file.html#wxdownloadfileobject">


                                            wx.downloadFile

                                        </a>



                                    </li>


                                </ul>

                            </li>

                            <li class="chapter  " data-level="1.4.1.3" data-path="network-socket.html">

                                <a href="network-socket.html">


                                    WebSocket

                                </a>



                                <ul class="articles">


                                    <li class="chapter  " data-level="1.4.1.3.1" data-path="network-socket.html">

                                        <a href="network-socket.html#wxconnectsocketobject">


                                            wx.connectSocket

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.1.3.2" data-path="network-socket.html">

                                        <a href="network-socket.html#wxonsocketopencallback">


                                            wx.onSocketOpen

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.1.3.3" data-path="network-socket.html">

                                        <a href="network-socket.html#wxonsocketerrorcallback">


                                            wx.onSocketError

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.1.3.4" data-path="network-socket.html">

                                        <a href="network-socket.html#wxsendsocketmessageobject">


                                            wx.sendSocketMessage

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.1.3.5" data-path="network-socket.html">

                                        <a href="network-socket.html#wxonsocketmessagecallback">


                                            wx.onSocketMessage

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.1.3.6" data-path="network-socket.html">

                                        <a href="network-socket.html#wxclosesocket">


                                            wx.closeSocket

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.1.3.7" data-path="network-socket.html">

                                        <a href="network-socket.html#wxonsocketclosecallback">


                                            wx.onSocketClose

                                        </a>



                                    </li>


                                </ul>

                            </li>


                        </ul>

                    </li>

                    <li class="chapter  open" data-level="1.4.2" data-path="media-picture.html">

                        <a href="media-picture.html">


                            媒体

                        </a>



                        <ul class="articles">


                            <li class="chapter  " data-level="1.4.2.1" data-path="media-picture.html">

                                <a href="media-picture.html">


                                    图片

                                </a>



                                <ul class="articles">


                                    <li class="chapter  " data-level="1.4.2.1.1" data-path="media-picture.html">

                                        <a href="media-picture.html#wxchooseimageobject">


                                            wx.chooseImage

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.2.1.2" data-path="media-picture.html">

                                        <a href="media-picture.html#wxpreviewimageobject">


                                            wx.previewImage

                                        </a>



                                    </li>


                                </ul>

                            </li>

                            <li class="chapter  " data-level="1.4.2.2" data-path="media-record.html">

                                <a href="media-record.html">


                                    录音

                                </a>



                                <ul class="articles">


                                    <li class="chapter  " data-level="1.4.2.2.1" data-path="media-record.html">

                                        <a href="media-record.html#wxstartrecordobject">


                                            wx.startRecord

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.2.2.2" data-path="media-record.html">

                                        <a href="media-record.html#wxstoprecord">


                                            wx.stopRecord

                                        </a>



                                    </li>


                                </ul>

                            </li>

                            <li class="chapter  " data-level="1.4.2.3" data-path="media-voice.html">

                                <a href="media-voice.html">


                                    音频播放控制

                                </a>



                                <ul class="articles">


                                    <li class="chapter  " data-level="1.4.2.3.1" data-path="media-voice.html">

                                        <a href="media-voice.html#wxplayvoiceobject">


                                            wx.playVoice

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.2.3.2" data-path="media-voice.html">

                                        <a href="media-voice.html#wxpausevoice">


                                            wx.pauseVoice

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.2.3.3" data-path="media-voice.html">

                                        <a href="media-voice.html#wxstopvoice">


                                            wx.stopVoice

                                        </a>



                                    </li>


                                </ul>

                            </li>

                            <li class="chapter  " data-level="1.4.2.4" data-path="media-background-audio.html">

                                <a href="media-background-audio.html">


                                    音乐播放控制

                                </a>



                                <ul class="articles">


                                    <li class="chapter  " data-level="1.4.2.4.1" data-path="media-background-audio.html">

                                        <a href="media-background-audio.html#wxgetbackgroundaudioplayerstateobject">


                                            wx.getBackgroundAudioPlayerState

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.2.4.2" data-path="media-background-audio.html">

                                        <a href="media-background-audio.html#wxplaybackgroundaudioobject">


                                            wx.playBackgroundAudio

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.2.4.3" data-path="media-background-audio.html">

                                        <a href="media-background-audio.html#wxpausebackgroundaudio">


                                            wx.pauseBackgroundAudio

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.2.4.4" data-path="media-background-audio.html">

                                        <a href="media-background-audio.html#wxseekbackgroundaudioobject">


                                            wx.seekBackgroundAudio

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.2.4.5" data-path="media-background-audio.html">

                                        <a href="media-background-audio.html#wxstopbackgroundaudio">


                                            wx.stopBackgroundAudio

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.2.4.6" data-path="media-background-audio.html">

                                        <a href="media-background-audio.html#wxonbackgroundaudioplaycallback">


                                            wx.onBackgroundAudioPlay

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.2.4.7" data-path="media-background-audio.html">

                                        <a href="media-background-audio.html#wxonbackgroundaudiopausecallback">


                                            wx.onBackgroundAudioPause

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.2.4.8" data-path="media-background-audio.html">

                                        <a href="media-background-audio.html#wxonbackgroundaudiostopcallback">


                                            wx.onBackgroundAudioStop

                                        </a>



                                    </li>


                                </ul>

                            </li>

                            <li class="chapter  " data-level="1.4.2.5" data-path="file.html">

                                <a href="file.html">


                                    文件

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.4.2.6" data-path="media-video.html">

                                <a href="media-video.html">


                                    视频

                                </a>



                            </li>


                        </ul>

                    </li>

                    <li class="chapter  open" data-level="1.4.3" data-path="data.html">

                        <a href="data.html">


                            数据

                        </a>



                        <ul class="articles">


                            <li class="chapter  " data-level="1.4.3.1" data-path="data.html">

                                <a href="data.html">


                                    数据缓存

                                </a>



                                <ul class="articles">


                                    <li class="chapter  " data-level="1.4.3.1.1" data-path="data.html">

                                        <a href="data.html#wxsetstorageobject">


                                            wx.setStorage

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.3.1.2" data-path="data.html">

                                        <a href="data.html#wxsetstoragesynckeyvalue">


                                            wx.setStorageSync

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.3.1.3" data-path="data.html">

                                        <a href="data.html#wxgetstorageobject">


                                            wx.getStorage

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.3.1.4" data-path="data.html">

                                        <a href="data.html#wxgetstoragesynckey">


                                            wx.getStorageSync

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.3.1.5" data-path="data.html">

                                        <a href="data.html#wxclearstorage">


                                            wx.clearStorage

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.3.1.6" data-path="data.html">

                                        <a href="data.html#wxclearstoragesync">


                                            wx.clearStorageSync

                                        </a>



                                    </li>


                                </ul>

                            </li>


                        </ul>

                    </li>

                    <li class="chapter  open" data-level="1.4.4" data-path="location.html">

                        <a href="location.html">


                            位置

                        </a>



                        <ul class="articles">


                            <li class="chapter  " data-level="1.4.4.1" data-path="location.html">

                                <a href="location.html#wxgetlocationobject">


                                    获取位置

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.4.4.2" data-path="location.html">

                                <a href="location.html#wxopenlocationobject">


                                    查看位置

                                </a>



                            </li>


                        </ul>

                    </li>

                    <li class="chapter  open" data-level="1.4.5" data-path="device.html">

                        <a href="device.html">


                            设备

                        </a>



                        <ul class="articles">


                            <li class="chapter  " data-level="1.4.5.1" data-path="device.html">

                                <a href="device.html#wxgetnetworktypeobject">


                                    网络状态

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.4.5.2" data-path="device.html">

                                <a href="device.html#wxgetsysteminfoobject">


                                    系统信息

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.4.5.3" data-path="device.html">

                                <a href="device.html#wxonaccelerometerchangecallback">


                                    重力感应

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.4.5.4" data-path="device.html">

                                <a href="device.html#wxoncompasschangecallback">


                                    罗盘

                                </a>



                            </li>


                        </ul>

                    </li>

                    <li class="chapter  open" data-level="1.4.6" data-path="ui.html">

                        <a href="ui.html">


                            界面

                        </a>



                        <ul class="articles">


                            <li class="chapter  " data-level="1.4.6.1" data-path="ui.html">

                                <a href="ui.html">


                                    设置导航条

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.4.6.2" data-path="ui-navigate.html">

                                <a href="ui-navigate.html">


                                    导航

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.4.6.3" data-path="api-animation.html">

                                <a href="api-animation.html">


                                    动画

                                </a>



                            </li>

                            <li class="chapter active " data-level="1.4.6.4" data-path="api-canvas.html">

                                <a href="api-canvas.html">


                                    绘图

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.4.6.5" data-path="ui-other.html">

                                <a href="ui-other.html">


                                    其他

                                </a>



                            </li>


                        </ul>

                    </li>

                    <li class="chapter  open" data-level="1.4.7" data-path="api-login.html">

                        <a href="api-login.html">


                            开放接口

                        </a>



                        <ul class="articles">


                            <li class="chapter  " data-level="1.4.7.1" data-path="api-login.html">

                                <a href="api-login.html">


                                    登录

                                </a>



                                <ul class="articles">


                                    <li class="chapter  " data-level="1.4.7.1.1" data-path="signature.html">

                                        <a href="signature.html">


                                            签名加密

                                        </a>



                                    </li>


                                </ul>

                            </li>

                            <li class="chapter  " data-level="1.4.7.2" data-path="open.html">

                                <a href="open.html">


                                    用户信息

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.4.7.3" data-path="api-pay.html">

                                <a href="api-pay.html">


                                    微信支付

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.4.7.4" data-path="notice.html">

                                <a href="notice.html">


                                    模板消息

                                </a>



                                <ul class="articles">


                                    <li class="chapter  " data-level="1.4.7.4.1" data-path="notice.html">

                                        <a href="notice.html#使用说明">


                                            使用说明

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.7.4.2" data-path="notice.html">

                                        <a href="notice.html#接口说明">


                                            接口说明

                                        </a>



                                    </li>


                                </ul>

                            </li>


                        </ul>

                    </li>


                </ul>


            </nav>


        </div>

        <div class="book-body">

            <div class="body-inner">

                <!--                     
                
                <div class="book-header" role="navigation">
                    
                </div>
                
                
                 -->

                <div class="page-wrapper" tabindex="-1" role="main">
                    <div class="page-inner">

                        <div id="book-search-results">
                            <div class="search-noresults">

                                <section class="normal markdown-section">

                                    <h3 id="wxcreatecontext">wx.createContext()</h3><p>​    创建并返回绘图上下文context对象。</p><h4 id="context">context</h4><p>​    context只是一个记录方法调用的容器，用于生成记录绘制行为的actions数组。context跟<code>&lt;canvas/&gt;</code>不存在对应关系，一个context生成画布的绘制动作数组可以应用于多个<code>&lt;canvas/&gt;</code>。</p><pre><code class="lang-javascript"><span class="hljs-comment">// 假设页面上有3个画布</span>
<span class="hljs-keyword">var</span> canvas1Id = <span class="hljs-number">3001</span>;
<span class="hljs-keyword">var</span> canvas2Id = <span class="hljs-number">3002</span>;
<span class="hljs-keyword">var</span> canvas3Id = <span class="hljs-number">3003</span>;

<span class="hljs-keyword">var</span> context = wx.createContext();

[canvas1Id, canvas2Id, canvas3Id].forEach(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">id</span>) </span>{
  context.clearActions();
  <span class="hljs-comment">// 在context上调用方法</span>
  wx.drawCanvas({
    canvasId: id,
    actions: context.getActions();
  });
});</code></pre>
                                    <p><strong>context对象的方法列表：</strong></p><table>
                                    <thead>
                                    <tr><th>方法</th>
                                        <th>参数</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td>getActions</td>
                                    <td>无</td>
                                    <td>获取当前context上存储的绘图动作</td>
                                </tr><tr><td>clearActions</td>
                                    <td>无</td>
                                    <td>清空当前的存储绘图动作</td>
                                </tr><tr><td>变形</td>
                                    <td></td>
                                    <td></td>
                                </tr><tr><td><a href="#scale">scale</a></td>
                                    <td></td>
                                    <td>对横纵坐标进行缩放</td>
                                </tr><tr><td><a href="#rotate">rotate</a></td>
                                    <td></td>
                                    <td>对坐标轴进行顺时针旋转</td>
                                </tr><tr><td><a href="#translate">translate</a></td>
                                    <td></td>
                                    <td>对坐标原点进行缩放</td>
                                </tr><tr><td>save</td>
                                    <td>无</td>
                                    <td>保存当前坐标轴的缩放、旋转、平移信息</td>
                                </tr><tr><td>restore</td>
                                    <td>无</td>
                                    <td>恢复之前保存过的坐标轴的缩放、旋转、平移信息</td>
                                </tr><tr><td>绘制</td>
                                    <td></td>
                                    <td></td>
                                </tr><tr><td><a href="#clearrect">clearRect</a></td>
                                    <td></td>
                                    <td>在给定的矩形区域内，清除画布上的像素</td>
                                </tr><tr><td><a href="#filltext">fillText</a></td>
                                    <td></td>
                                    <td>在画布上绘制被填充的文本</td>
                                </tr><tr><td><a href="#drawimage">drawImage</a></td>
                                    <td></td>
                                    <td>在画布上绘制图像</td>
                                </tr><tr><td>fill</td>
                                    <td>无</td>
                                    <td>对当前路径进行填充</td>
                                </tr><tr><td>stroke</td>
                                    <td>无</td>
                                    <td>对当前路径进行描边</td>
                                </tr><tr><td>路径</td>
                                    <td></td>
                                    <td></td>
                                </tr><tr><td><a href="#beginpath">beginPath</a></td>
                                    <td>无</td>
                                    <td>开始一个路径</td>
                                </tr><tr><td><a href="#closepath">closePath</a></td>
                                    <td>无</td>
                                    <td>关闭一个路径</td>
                                </tr><tr><td><a href="#moveto">moveTo</a></td>
                                    <td></td>
                                    <td>把路径移动到画布中的指定点，但不创建线条。</td>
                                </tr><tr><td><a href="#lineto">lineTo</a></td>
                                    <td></td>
                                    <td>添加一个新点，然后在画布中创建从该点到最后指定点的线条。</td>
                                </tr><tr><td><a href="#rect">rect</a></td>
                                    <td></td>
                                    <td>添加一个矩形路径到当前路径。</td>
                                </tr><tr><td><a href="#arc">arc</a></td>
                                    <td></td>
                                    <td>添加一个弧形路径到当前路径，顺时针绘制。</td>
                                </tr><tr><td><a href="#quadraticcurveto">quadraticCurveTo</a></td>
                                    <td></td>
                                    <td>创建二次方贝塞尔曲线</td>
                                </tr><tr><td><a href="#beziercurveto">bezierCurveTo</a></td>
                                    <td></td>
                                    <td>创建三次方贝塞尔曲线</td>
                                </tr><tr><td>样式</td>
                                    <td></td>
                                    <td></td>
                                </tr><tr><td><a href="#setfillstyle">setFillStyle</a></td>
                                    <td></td>
                                    <td>设置填充样式</td>
                                </tr><tr><td><a href="#setstrokestyle">setStrokeStyle</a></td>
                                    <td></td>
                                    <td>设置线条样式</td>
                                </tr><tr><td><a href="#setshadow">setShadow</a></td>
                                    <td></td>
                                    <td>设置阴影</td>
                                </tr><tr><td><a href="#setfontsize">setFontSize</a></td>
                                    <td></td>
                                    <td>设置字体大小</td>
                                </tr><tr><td><a href="#setlinecap">setLineCap</a></td>
                                    <td></td>
                                    <td>设置线条端点的样式</td>
                                </tr><tr><td><a href="#setlinejoin">setLineJoin</a></td>
                                    <td></td>
                                    <td>设置两线相交处的样式</td>
                                </tr><tr><td><a href="#setlinewidth">setLineWidth</a></td>
                                    <td></td>
                                    <td>设置线条宽度</td>
                                </tr><tr><td><a href="#setmiterlimit">setMiterLimit</a></td>
                                    <td></td>
                                    <td>设置最大倾斜</td>
                                </tr></tbody></table>

                                    <p><strong>方法详解：</strong></p><h5 id="scale">scale</h5><p>在调用scale()方法后，之后创建的路径其横纵坐标会被缩放。多次调用scale，倍数会相乘。</p><table>
                                    <thead>
                                    <tr><th>参数</th>
                                        <th>类型</th>
                                        <th>范围</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td>scaleWidth</td>
                                    <td>Number</td>
                                    <td>1=100%，0.5=50%，2=200%，依次类推</td>
                                    <td>横坐标缩放的倍数</td>
                                </tr><tr><td>scaleHeight</td>
                                    <td>Number</td>
                                    <td>1=100%，0.5=50%，2=200%，依次类推</td>
                                    <td>纵坐标轴缩放的倍数</td>
                                </tr></tbody></table>

                                    <p><strong>示例代码：<a href="../demo/api-canvas.zip">下载</a></strong></p><pre><code class="lang-html"><span class="hljs-comment">&lt;!--scale.wxml --&gt;</span> 
<span class="hljs-tag">&lt;<span class="hljs-name">canvas</span> <span class="hljs-attr">canvas-id</span>=<span class="hljs-string">"1"</span> /&gt;</span></code></pre>
<pre><code class="lang-javascript"><span class="hljs-comment">//scale.js</span>
Page({
  onReady:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>)</span>{
    <span class="hljs-keyword">var</span> context = wx.createContext();
    context.rect(<span class="hljs-number">5</span>,<span class="hljs-number">5</span>,<span class="hljs-number">25</span>,<span class="hljs-number">15</span>)
    context.stroke();
    context.scale(<span class="hljs-number">2</span>,<span class="hljs-number">2</span>); <span class="hljs-comment">//再放大2倍</span>
    context.rect(<span class="hljs-number">5</span>,<span class="hljs-number">5</span>,<span class="hljs-number">25</span>,<span class="hljs-number">15</span>);
    context.stroke();
    context.scale(<span class="hljs-number">2</span>,<span class="hljs-number">2</span>); <span class="hljs-comment">//再放大2倍</span>
    context.rect(<span class="hljs-number">5</span>,<span class="hljs-number">5</span>,<span class="hljs-number">25</span>,<span class="hljs-number">15</span>)
    context.stroke();
    wx.drawCanvas({
      canvasId:<span class="hljs-number">1</span>,
      actions:context.getActions()
    });
  }
})</code></pre>
                                    <p><img src="../image/scale.png"></p><h5 id="rotate">rotate</h5><p>以原点为中心，原点可以用<a href="#translate">translate</a>方法修改。顺时针旋转当前坐标轴。多次调用rotate，旋转的角度会叠加。</p><table>
                                    <thead>
                                    <tr><th>参数</th>
                                        <th>类型</th>
                                        <th>范围</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td>rotate</td>
                                    <td>Number</td>
                                    <td>degrees * Math.PI/180；degrees范围为0~360</td>
                                    <td>旋转角度，以弧度计</td>
                                </tr></tbody></table>

                                    <p><strong>示例代码：<a href="../demo/api-canvas.zip">下载</a></strong></p><pre><code class="lang-javascript"><span class="hljs-comment">//rotate.js</span>
Page({
  onReady:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>)</span>{
    <span class="hljs-keyword">var</span> context = wx.createContext();
    context.rect(<span class="hljs-number">50</span>,<span class="hljs-number">50</span>,<span class="hljs-number">200</span>,<span class="hljs-number">200</span>)
    context.stroke();
    context.rotate(<span class="hljs-number">5</span>*<span class="hljs-built_in">Math</span>.PI/<span class="hljs-number">180</span>)
    context.rect(<span class="hljs-number">50</span>,<span class="hljs-number">50</span>,<span class="hljs-number">200</span>,<span class="hljs-number">200</span>)
      context.stroke();
      context.rotate(<span class="hljs-number">5</span>*<span class="hljs-built_in">Math</span>.PI/<span class="hljs-number">180</span>)
      context.rect(<span class="hljs-number">50</span>,<span class="hljs-number">50</span>,<span class="hljs-number">200</span>,<span class="hljs-number">200</span>)
      context.stroke()

    wx.drawCanvas({
      canvasId:<span class="hljs-number">1</span>,
      actions:context.getActions()
    });
  }
})</code></pre>
                                    <p><img src="../image/rotate.png"></p><h5 id="translate">translate</h5><p>对当前坐标系的原点(0, 0)进行变换，默认的坐标系原点为页面左上角。</p><table>
                                    <thead>
                                    <tr><th>参数</th>
                                        <th>类型</th>
                                        <th>范围</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td>x</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>水平坐标平移量</td>
                                </tr><tr><td>y</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>竖直坐标平移量</td>
                                </tr></tbody></table>

                                    <p><strong>示例代码：<a href="../demo/api-canvas.zip">下载</a></strong></p><pre><code class="lang-javascript"><span class="hljs-comment">//translate.js</span>
Page({
  onReady:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
    <span class="hljs-keyword">var</span> context = wx.createContext();

    context.rect(<span class="hljs-number">50</span>,<span class="hljs-number">50</span>,<span class="hljs-number">200</span>,<span class="hljs-number">200</span>)
    context.stroke()
    context.translate(<span class="hljs-number">50</span>,<span class="hljs-number">50</span>)
    context.rect(<span class="hljs-number">50</span>,<span class="hljs-number">50</span>,<span class="hljs-number">200</span>,<span class="hljs-number">200</span>)
    context.stroke();

    wx.drawCanvas({
      canvasId:<span class="hljs-number">1</span>,
      actions:context.getActions()
    });
  }
})</code></pre>
                                    <p><img src="../image/translate.png"></p><hr><h5 id="clearrect">clearRect</h5><p>清除画布上在该矩形区域内的内容</p><table>
                                    <thead>
                                    <tr><th>参数</th>
                                        <th>类型</th>
                                        <th>范围</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td>x</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>矩形区域左上角的x坐标</td>
                                </tr><tr><td>y</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>矩形区域左上角的y坐标</td>
                                </tr><tr><td>width</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>矩形区域的宽度</td>
                                </tr><tr><td>height</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>矩形区域的高度</td>
                                </tr></tbody></table>

                                    <p><strong>示例代码：<a href="../demo/api-canvas.zip">下载</a></strong></p><pre><code class="lang-javascript"><span class="hljs-comment">//clearrect.js</span>
Page({
  onReady:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
    <span class="hljs-keyword">var</span> context = wx.createContext();

    context.rect(<span class="hljs-number">50</span>,<span class="hljs-number">50</span>,<span class="hljs-number">200</span>,<span class="hljs-number">200</span>)
    context.fill()
    context.clearRect(<span class="hljs-number">100</span>,<span class="hljs-number">100</span>,<span class="hljs-number">50</span>,<span class="hljs-number">50</span>)

    wx.drawCanvas({
      canvasId:<span class="hljs-number">1</span>,
      actions:context.getActions()
    });
  }
})</code></pre>
                                    <p><img src="../image/clearrect.png"></p><h5 id="drawimage">drawImage</h5><p>绘制图像，图像保持原始尺寸。</p><table>
                                    <thead>
                                    <tr><th>参数</th>
                                        <th>类型</th>
                                        <th>范围</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td>imageResource</td>
                                    <td>String</td>
                                    <td>通过chooseImage得到一个文件路径或者一个项目目录内的图片</td>
                                    <td>所要绘制的图片资源</td>
                                </tr><tr><td>x</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>图像左上角的x坐标</td>
                                </tr><tr><td>y</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>图像左上角的y坐标</td>
                                </tr></tbody></table>

                                    <p><strong>示例：<a href="../demo/api-canvas.zip">下载</a></strong></p><pre><code class="lang-javascript"><span class="hljs-comment">//drawimage.js</span>
Page({
  onReady:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>)</span>{
    <span class="hljs-keyword">var</span> context = wx.createContext();
    wx.chooseImage({
      success:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">res</span>)</span>{
        context.drawImage(res.tempFilePaths[<span class="hljs-number">0</span>],<span class="hljs-number">0</span>,<span class="hljs-number">0</span>)
        wx.drawCanvas({
          canvasId:<span class="hljs-number">1</span>,
          actions:context.getActions()
        });
      }
    })
  }
})</code></pre>
                                    <p><img src="../image/drawimage.png"></p><h5 id="filltext">fillText</h5><p>在画布上绘制被填充的文本。</p><table>
                                    <thead>
                                    <tr><th>参数</th>
                                        <th>类型</th>
                                        <th>范围</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td>text</td>
                                    <td>String</td>
                                    <td></td>
                                    <td>在画布上输出的文本</td>
                                </tr><tr><td>x</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>绘制文本的左上角x坐标位置</td>
                                </tr><tr><td>y</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>绘制文本的左上角y坐标位置</td>
                                </tr></tbody></table>

                                    <p><strong>示例代码：<a href="../demo/api-canvas.zip">下载</a></strong></p><pre><code class="lang-javascript"><span class="hljs-comment">//filltext.js</span>
Page({
  onReady:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
    <span class="hljs-keyword">var</span> context = wx.createContext();

    context.setFontSize(<span class="hljs-number">14</span>)
    context.fillText(<span class="hljs-string">"MINA"</span>,<span class="hljs-number">50</span>,<span class="hljs-number">50</span>)
    context.moveTo(<span class="hljs-number">0</span>,<span class="hljs-number">50</span>)
    context.lineTo(<span class="hljs-number">100</span>,<span class="hljs-number">50</span>)
    context.stroke();

    context.setFontSize(<span class="hljs-number">20</span>)
    context.fillText(<span class="hljs-string">"MINA"</span>,<span class="hljs-number">100</span>,<span class="hljs-number">100</span>)
    context.moveTo(<span class="hljs-number">0</span>,<span class="hljs-number">100</span>)
    context.lineTo(<span class="hljs-number">200</span>,<span class="hljs-number">100</span>)
    context.stroke();
    wx.drawCanvas({
      canvasId:<span class="hljs-number">1</span>,
      actions:context.getActions()
    });
  }
})</code></pre>
                                    <p><img src="../image/filltext.png"></p><hr><h5 id="beginpath">beginPath</h5><p>开始创建一个路径，需要调用fill或者stroke才会使用路径进行填充或描边。同一个路径内的多次<code>setFillStyle</code>、<code>setStrokeStyle</code>、<code>setLineWidth</code>等设置，以最后一次设置为准。</p><h5 id="closepage">closePage</h5><p>关闭一个路径。</p><h5 id="moveto">moveTo</h5><p>把路径移动到画布中的指定点，不创建线条。</p><table>
                                    <thead>
                                    <tr><th>参数</th>
                                        <th>类型</th>
                                        <th>范围</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td>x</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>目标位置的x坐标</td>
                                </tr><tr><td>y</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>目标位置的y坐标</td>
                                </tr></tbody></table>

                                    <h5 id="lineto">lineTo</h5><p>在当前位置添加一个新点，然后在画布中创建从该点到最后指定点的路径。</p><table>
                                    <thead>
                                    <tr><th>参数</th>
                                        <th>类型</th>
                                        <th>范围</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td>x</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>目标位置的x坐标</td>
                                </tr><tr><td>y</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>目标位置的y坐标</td>
                                </tr></tbody></table>

                                    <h5 id="rect">rect</h5><p>添加一个矩形路径到当前路径。</p><table>
                                    <thead>
                                    <tr><th>参数</th>
                                        <th>类型</th>
                                        <th>范围</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td>x</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>矩形路径左上角的x坐标</td>
                                </tr><tr><td>y</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>矩形路径左上角的y坐标</td>
                                </tr><tr><td>width</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>矩形路径的宽度</td>
                                </tr><tr><td>height</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>矩形路径的高度</td>
                                </tr></tbody></table>

                                    <h5 id="arc">arc</h5><p>添加一个弧形路径到当前路径，顺时针绘制。</p><table>
                                    <thead>
                                    <tr><th>参数</th>
                                        <th>类型</th>
                                        <th>范围</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td>x</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>矩形路径左上角的x坐标</td>
                                </tr><tr><td>y</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>矩形路径左上角的y坐标</td>
                                </tr><tr><td>radius</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>矩形路径的宽度</td>
                                </tr><tr><td>startAngle</td>
                                    <td>Number</td>
                                    <td>弧度, 0到2pi</td>
                                    <td>起始弧度</td>
                                </tr><tr><td>sweepAngle</td>
                                    <td>Number</td>
                                    <td>弧度, 0到2pi</td>
                                    <td>从起始弧度开始，扫过的弧度</td>
                                </tr></tbody></table>

                                    <h5 id="quadraticcurveto">quadraticCurveTo</h5><p>创建二次贝塞尔曲线路径。</p><table>
                                    <thead>
                                    <tr><th>参数</th>
                                        <th>类型</th>
                                        <th>范围</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td>cpx</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>贝塞尔控制点的x坐标</td>
                                </tr><tr><td>cpy</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>贝塞尔控制点的y坐标</td>
                                </tr><tr><td>x</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>结束点的x坐标</td>
                                </tr><tr><td>y</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>结束点的y坐标</td>
                                </tr></tbody></table>

                                    <h5 id="beziercurveto">bezierCurveTo</h5><p>创建三次方贝塞尔曲线路径。</p><table>
                                    <thead>
                                    <tr><th>参数</th>
                                        <th>类型</th>
                                        <th>范围</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td>cp1x</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>第一个贝塞尔控制点的 x 坐标</td>
                                </tr><tr><td>cp1y</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>第一个贝塞尔控制点的 y 坐标</td>
                                </tr><tr><td>cp2x</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>第二个贝塞尔控制点的 x 坐标</td>
                                </tr><tr><td>cp2y</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>第二个贝塞尔控制点的 y 坐标</td>
                                </tr><tr><td>x</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>结束点的 x 坐标</td>
                                </tr><tr><td>y</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>结束点的 y 坐标</td>
                                </tr></tbody></table>

                                    <hr><h5 id="setfillstyle">setFillStyle</h5><p>设置纯色填充。</p><p><strong>设置颜色为填充样式</strong></p><table>
                                    <thead>
                                    <tr><th>参数</th>
                                        <th>类型</th>
                                        <th>范围</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td>color</td>
                                    <td>String</td>
                                    <td>'rgb(255, 0, 0)'或'rgba(255, 0, 0, 0.6)'或'#ff0000'格式的颜色字符串</td>
                                    <td>设置为填充样式的颜色</td>
                                </tr></tbody></table>

                                    <h5 id="setstrokestyle">setStrokeStyle</h5><p>​    设置纯色描边，参数同<a href="#setfillstyle">setFillStyle</a>。</p><p><strong>示例代码：<a href="../demo/api-canvas.zip">下载</a></strong></p><pre><code class="lang-javascript"><span class="hljs-comment">//setfillstyle.js</span>
Page({
  onReady:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>)</span>{
    <span class="hljs-keyword">var</span> context = wx.createContext();

    context.setFillStyle(<span class="hljs-string">"#ff00ff"</span>);
    context.setStrokeStyle(<span class="hljs-string">"#00ffff"</span>);

    context.rect(<span class="hljs-number">50</span>,<span class="hljs-number">50</span>,<span class="hljs-number">100</span>,<span class="hljs-number">100</span>)
    context.fill()
    context.stroke()
    wx.drawCanvas({
      canvasId:<span class="hljs-number">1</span>,
      actions:context.getActions()
    });
  }
})</code></pre>
                                    <p><img src="../image/setfillstyle.png"></p><h5 id="setshadow">setShadow</h5><p>设置阴影样式。</p><table>
                                    <thead>
                                    <tr><th>参数</th>
                                        <th>类型</th>
                                        <th>范围</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td>offsetX</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>阴影相对于形状在水平方向的偏移</td>
                                </tr><tr><td>offsetY</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>阴影相对于形状在竖直方向的偏移</td>
                                </tr><tr><td>blur</td>
                                    <td>Number</td>
                                    <td>0~100</td>
                                    <td>阴影的模糊级别，数值越大越模糊</td>
                                </tr><tr><td>color</td>
                                    <td>Color</td>
                                    <td>'rgb(255, 0, 0)'或'rgba(255, 0, 0, 0.6)'或'#ff0000'格式的颜色字符串</td>
                                    <td>阴影的颜色</td>
                                </tr></tbody></table>

                                    <h5 id="setfontsize">setFontSize</h5><p>设置字体的字号。</p><table>
                                    <thead>
                                    <tr><th>参数</th>
                                        <th>类型</th>
                                        <th>范围</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td>fontSize</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>字体的字号</td>
                                </tr></tbody></table>

                                    <h5 id="setlinewidth">setLineWidth</h5><p>设置线条的宽度。</p><table>
                                    <thead>
                                    <tr><th>参数</th>
                                        <th>类型</th>
                                        <th>范围</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td>lineWidth</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>线条的宽度</td>
                                </tr></tbody></table>

                                    <h5 id="setlinecap">setLineCap</h5><p>设置线条的结束端点样式。</p><table>
                                    <thead>
                                    <tr><th>参数</th>
                                        <th>类型</th>
                                        <th>范围</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td>lineCap</td>
                                    <td>String</td>
                                    <td>'butt'、'round'、'square'</td>
                                    <td>线条的结束端点样式</td>
                                </tr></tbody></table>

                                    <h5 id="setlinejoin">setLineJoin</h5><p>设置两条线相交时，所创建的拐角类型。</p><table>
                                    <thead>
                                    <tr><th>参数</th>
                                        <th>类型</th>
                                        <th>范围</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td>lineJoin</td>
                                    <td>String</td>
                                    <td>'bevel'、'round'、'miter'</td>
                                    <td>两条线相交时，所创建的拐角类型</td>
                                </tr></tbody></table>

                                    <h5 id="setmiterlimit">setMiterLimit</h5><p>设置最大斜接长度，斜接长度指的是在两条线交汇处内角和外角之间的距离。 当<a href="#setlinejoin">setLineJoin</a>为'miter'时才有效。超过最大倾斜长度的，连接处将以lineJoin为bevel来显示</p><table>
                                    <thead>
                                    <tr><th>参数</th>
                                        <th>类型</th>
                                        <th>范围</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td>miterLimit</td>
                                    <td>Number</td>
                                    <td></td>
                                    <td>最大斜接长度</td>
                                </tr></tbody></table>

                                    <p><strong>示例代码：<a href="../demo/api-canvas.zip">下载</a></strong></p><pre><code class="lang-javascript"><span class="hljs-comment">//line.js</span>
Page({
  onReady:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>)</span>{
    <span class="hljs-keyword">var</span> context = wx.createContext();

    context.setLineWidth(<span class="hljs-number">10</span>);
    context.setLineCap(<span class="hljs-string">"round"</span>)
    context.setLineJoin(<span class="hljs-string">"miter"</span>);
    context.setMiterLimit(<span class="hljs-number">10</span>);
    context.moveTo(<span class="hljs-number">20</span>,<span class="hljs-number">20</span>);
    context.lineTo(<span class="hljs-number">150</span>,<span class="hljs-number">27</span>);
    context.lineTo(<span class="hljs-number">20</span>,<span class="hljs-number">54</span>);
    context.stroke();

    context.beginPath();

    context.setMiterLimit(<span class="hljs-number">3</span>);
    context.moveTo(<span class="hljs-number">20</span>,<span class="hljs-number">70</span>);
    context.lineTo(<span class="hljs-number">150</span>,<span class="hljs-number">77</span>);
    context.lineTo(<span class="hljs-number">20</span>,<span class="hljs-number">104</span>);
    context.stroke();

    wx.drawCanvas({
      canvasId:<span class="hljs-number">1</span>,
      actions:context.getActions()
    });
  }
})</code></pre>
                                    <p><img src="../image/line.png"></p><hr><h3 id="wxdrawcanvasobject">wx.drawCanvas(OBJECT)</h3><p><strong>OBJECT参数说明：</strong></p><table>
                                    <thead>
                                    <tr><th>参数</th>
                                        <th>类型</th>
                                        <th>必填</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td>canvasId</td>
                                    <td>String</td>
                                    <td>是</td>
                                    <td>画布标识，传入<a href="../wxml/component/canvas.md"><code>&lt;canvas/&gt;</code></a>的cavas-id</td>
                                </tr><tr><td>actions</td>
                                    <td>Array</td>
                                    <td>是</td>
                                    <td>绘图动作数组，由wx.createContext创建的context，调用getActions方法导出绘图动作数组。</td>
                                </tr></tbody></table>

                                    <p><strong>示例：<a href="../demo/api-canvas.zip">下载</a></strong></p><pre><code class="lang-html"><span class="hljs-comment">&lt;!--canvas.wxml--&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">canvas</span> <span class="hljs-attr">cavas-id</span>=<span class="hljs-string">"firstCanvas"</span> /&gt;</span></code></pre>
<pre><code class="lang-javascript"><span class="hljs-comment">// index.js</span>
Page({
  canvasIdErrorCallback: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">e</span>) </span>{

    <span class="hljs-built_in">console</span>.error(e.detail.errMsg);
  },
  onReady: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">e</span>) </span>{

    <span class="hljs-comment">//使用wx.createContext获取绘图上下文context</span>
    <span class="hljs-keyword">var</span> context = wx.createContext();

    context.setStrokeStyle(<span class="hljs-string">"#00ff00"</span>);  
    context.setLineWidth(<span class="hljs-number">5</span>);  
    context.rect(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">200</span>,<span class="hljs-number">200</span>);  
    context.stroke()
    context.setStrokeStyle (<span class="hljs-string">"#ff0000"</span>) ;
    context.setLineWidth (<span class="hljs-number">2</span>)
    context.moveTo(<span class="hljs-number">160</span>,<span class="hljs-number">100</span>)
    context.arc(<span class="hljs-number">100</span>,<span class="hljs-number">100</span>,<span class="hljs-number">60</span>,<span class="hljs-number">0</span>,<span class="hljs-number">2</span>*<span class="hljs-built_in">Math</span>.PI,<span class="hljs-literal">true</span>);  
    context.moveTo(<span class="hljs-number">140</span>,<span class="hljs-number">100</span>);  
    context.arc(<span class="hljs-number">100</span>,<span class="hljs-number">100</span>,<span class="hljs-number">40</span>,<span class="hljs-number">0</span>,<span class="hljs-built_in">Math</span>.PI,<span class="hljs-literal">false</span>);  
    context.moveTo(<span class="hljs-number">85</span>,<span class="hljs-number">80</span>);  
    context.arc(<span class="hljs-number">80</span>,<span class="hljs-number">80</span>,<span class="hljs-number">5</span>,<span class="hljs-number">0</span>,<span class="hljs-number">2</span>*<span class="hljs-built_in">Math</span>.PI,<span class="hljs-literal">true</span>);  
    context.moveTo(<span class="hljs-number">125</span>,<span class="hljs-number">80</span>);  
    context.arc(<span class="hljs-number">120</span>,<span class="hljs-number">80</span>,<span class="hljs-number">5</span>,<span class="hljs-number">0</span>,<span class="hljs-number">2</span>*<span class="hljs-built_in">Math</span>.PI,<span class="hljs-literal">true</span>);  
    context.stroke();  

    <span class="hljs-comment">//调用wx.drawCanvas，通过canvasId指定在哪张画布上绘制，通过actions指定绘制行为</span>
    wx.drawCanvas({
      canvasId: <span class="hljs-string">'firstCanvas'</span>,
      actions: context.getActions() <span class="hljs-comment">//获取绘图动作数组</span>
    });
  }
});</code></pre>


                                </section>

                            </div>
                            <div class="search-results">
                                <div class="has-results">

                                    <h1 class="search-results-title"><span class="search-results-count"></span> 个结果 "<span class="search-query"></span>"</h1>
                                    <ul class="search-results-list"></ul>

                                </div>
                                <div class="no-results">

                                    <h1 class="search-results-title">没有找到相关内容 "<span class="search-query"></span>"</h1>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="foot" id="footer">
                    <ul class="links ft">
                        <li class="links_item"><a href="">关于腾讯</a></li>
                        <li class="links_item"><a href="">服务协议</a></li>
                        <li class="links_item"><a href="">运营规范</a></li>
                        <li class="links_item"><a href="">辟谣中心</a></li>
                        <li class="links_item"><a href="">客服中心</a></li>
                        <li class="links_item"><a href="">联系邮箱</a></li>
                        <li class="links_item"><a href="">侵权投诉</a></li>
                        <li class="links_item">
                            <p class="copyright">Copyright © 2012-<span id="s_copyright_year"></span> Tencent. All Rights Reserved.</p>
                        </li>
                    </ul>
                </div>

            </div>



            <a href="api-animation.html" class="navigation navigation-prev " aria-label="Previous page: 动画">
                <i class="fa fa-angle-left"></i>
            </a>


            <a href="ui-other.html" class="navigation navigation-next " aria-label="Next page: 其他">
                <i class="fa fa-angle-right"></i>
            </a>



        </div>
    </div>


    <script src="../../gitbook/gitbook.js"></script>
    <script src="../../gitbook/theme.js"></script>


    <script src="../../gitbook/gitbook-plugin-search/search-engine.js"></script>



    <script src="../../gitbook/gitbook-plugin-search/search.js"></script>



    <script src="../../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>



    <script src="../../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>


    




</div></body></html>